<!-- eslint-disable vue/multi-word-component-names -->
<style scoped>
body {
  margin: 0;
  background-color: beige;
}

/* 固定导航栏 */
.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 导航栏内部元素的布局 */
.logoContent {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.logo {
  height: 3rem;
  width: 3rem;
  margin-right: 10px;
  vertical-align: middle;
  -webkit-user-drag: none;
}

span.logo-text {
  font-size: 1.2rem;
  line-height: 10vh;
}

.swiper {
  position: relative;
  width: 100%;
  user-select: none;
}

.poem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000;
  z-index: 10;
}

.poem-auth {
  top: 60%;
  left: 60%;
  font-size: 1rem;
}

#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#back-to-top:hover {
  background-color: #0056b3;
}
/* 添加内边距，防止被导航栏遮挡 */
main {
  display: flex;
  justify-content: start;
  padding-top: 10vh; /* 与导航栏高度一致 */
}
.left {
  width: 70%;
}
.right {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  width: 30%;
}
.ipCard{
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 290px;
  height: 180px;
}
.contentArea
{
  display: flex;
  width: 100vw;
  min-width: 1000px;
}
</style>
<template>
  <div class="nav-container">
    <TopNavBar class="nav"
      :params="topNavParams"
      @menu-select="handleMenuSelect"
    >
      <template #left>
        <div class="logoContent">
          <img
            src="@/assets/logo/Jie.png"
            alt="Logo"
            class="logo"
          />
          <span class="logo-text">阿杰的虫洞栈</span>
        </div>
      </template>
    </TopNavBar>
  </div>
  <div class="swiper">
    <el-carousel height="100vh" motion-blur>
      <el-carousel-item v-for="img in imgArr" :key="img">
         <img :src="img" style="width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none;" />
      </el-carousel-item>
    </el-carousel>
    <span class="poem">物物而不物于物，念念而不念于念。</span>
    <br>
    <span class="poem poem-auth">——《庄子·外篇·山木第二十》</span>
    </div>
    <button id="back-to-top" title="返回顶部"
      :style="{ display: showButton ? 'block' : 'none' }"
      @click="backToTop">1</button>
    <main>
      <div class="contentArea">
        <div class="left">

        </div>
        <div class="right">
          <el-card class="ipCard">
            <img  style="height: 180px; width: 290px;" src="https://api.vvhan.com/api/ipCard?tip=Hello 亲爱的路人！" alt="HELLO~HELLO~">
          </el-card>
        </div>
      </div>
    </main>
</template>

<script>
import TopNavBar from '@/plugs/com/TopNavBar'

export default {
  components: {
    TopNavBar
  },
  data()
  {
    return {
      originalTitle: document.title, // 首页原始标题
      hiddenTitle: '来嘛，别害羞～', // 首页隐藏时的标题
      showButton: false, // 控制按钮显示状态
      activeIndex: '1', // 默认激活的菜单项
      imgArr: ['https://cn.bing.com/th?id=OHR.GreatWallStairs_ZH-CN4045949792_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
        'https://cn.bing.com/th?id=OHR.VietnamFalls_ZH-CN9659529108_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
        'https://cn.bing.com/th?id=OHR.RavennaBasilica_ZH-CN1406474730_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
        'https://cn.bing.com/th?id=OHR.TolkienOxford_ZH-CN6331694590_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp'],
      topNavParams: {
        menuData:
        [
          { index: '1', title: '首页' },
          { index: '2', title: '关于' },
          { index: '3', title: '即刻' },
          { index: '4', title: '实录' },
          { index: '5', title: '笔记' }
        ],
        primaryColor: '#2c3e50',
        backgroundColor: 'rgba(0,0,0,0)'
      }
    }
  },

  mounted()
  {
    // 动态创建 script 标签
    const script = document.createElement('script')
    script.src = 'https://api.vvhan.com/api/script/meihua'
    script.async = true // 确保脚本异步加载，不会阻塞页面渲染

    // 将 script 标签插入到 head 或 body 中
    document.head.appendChild(script)

    // 监听 visibilitychange 事件
    document.addEventListener('visibilitychange', this.handleVisibilityChange)
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount()
  {
    // 组件卸载时移除事件监听
    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
    // 移除滚动事件监听器
    window.removeEventListener('scroll', this.handleScroll)
  },

  methods: {
    // 处理滚动事件
    handleScroll()
    {
      window.scrollY > 40 ? this.topNavParams.backgroundColor = '#FFF' : this.topNavParams.backgroundColor = 'rgba(0,0,0,0)'
      window.scrollY > 600 ? this.showButton = true : this.showButton = false
    },

    // 返回顶部
    backToTop()
    {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
      })
    },
    handleVisibilityChange()
    {
      if (document.hidden)
      {
        // 页面隐藏时，修改标题
        document.title = this.hiddenTitle
      }
      else
      {
        // 页面重新激活时，恢复原始标题
        document.title = this.originalTitle
      }
    },

    // 处理菜单项点击事件
    handleMenuSelect(key, keyPath)
    {
      console.log('父组件接收到菜单项:', key, keyPath)
      // 这里可以根据 key 跳转到对应页面
      switch (key)
      {
      case '1':
        this.$router.push('/')
        break

      default:
        break
      }
    }
  }
}
</script>

